<template>
  <view class="add-address">
    <!-- 		地图 -->
    <!-- <view class="map"> </view> -->
    <!-- 表单 -->
    <view class="add-form">
      <u--form
        labelPosition="left"
        :model="FormData"
        ref="uForm"
        labelWidth="70"
      >
        <u-form-item label="收货人" prop="FConsignee" borderBottom>
          <u-input
            v-model="FormData.FConsignee"
            disabledColor="#ffffff"
            placeholder="请填写收货人姓名"
            border="none"
          ></u-input>
        </u-form-item>

        <u-form-item label="手机号码" prop="FPhone" borderBottom ref="item1">
          <u--input
            v-model="FormData.FPhone"
            disabledColor="#ffffff"
            placeholder="请输入11位手机号"
            border="none"
          ></u--input>
        </u-form-item>

        <u-form-item label="邮政编码" prop="FZipcode" borderBottom size="small">
          <u-input
            v-model="FormData.FZipcode"
            placeholder="请输入邮政编码"
            border="none"
          ></u-input>
        </u-form-item>

        <u-form-item label="所在地区" prop="formatAreaObj" borderBottom>
          <uni-data-picker
            :localdata="areaList"
            popup-title="请选择所在地区"
            @change="onchange"
            :value="formatAreaObj"
          />
        </u-form-item>

        <u-form-item label="地址" prop="FAddress" borderBottom size="small">
          <u-input
            v-model="FormData.FAddress"
            placeholder="请输入收货地址"
            border="none"
          ></u-input>
        </u-form-item>
        <u-form-item label="默认地址" prop="FDefault" borderBottom size="small">
          <li-radio
            prop="FDefault"
            v-model="FormData.FDefault"
            :rangeList="[
              { id: `1`, text: `是` },
              {
                id: `0`,
                text: `否`,
              },
            ]"
          />
        </u-form-item>
      </u--form>
    </view>

    <view class="submit-btn">
      <button class="btn" @click="onSubmit">保存</button>
    </view>
  </view>
</template>

<script>
import { reqPost } from "../../../common/http.request";
import { areaList } from "../../../constants/areaList";
import { uToast } from "../../../utils/uniUtils";
export default {
  data() {
    return {
      FormData: {
        FItemID: 0,
        FConsignee: "",
        FPhone: "",
        FZipcode: "",
        FPrvID: "",
        FCityID: "",
        FAreaID: "",
        FAddress: "",
        FPrCityArea: "",
        FDefault: "0",
      },
      areaList: areaList,
      formatAreaObj: [],
    };
  },
  onLoad({ id }) {
    // console.log(id);
    this.FormData.FItemID = id;
    if (id) {
      this.onDetail(id);
    }
  },
  methods: {
    onchange(e) {
      this.formatAreaObj = e.detail.value;
      let areaObj = [];
      if (this.formatAreaObj.length == 0) {
        areaObj = [0, 0, 0];
      } else {
        this.formatAreaObj.forEach((element) => {
          areaObj.push(element.value);
        });
      }
      this.FormData.FPrvID = areaObj[0] + "";
      this.FormData.FCityID = areaObj[1] + "";
      this.FormData.FAreaID = areaObj[2] + "";
      const provinces = this.areaList.find((item) => item.value == areaObj[0]);
      const cities = provinces.children.find(
        (item) => item.value == areaObj[1]
      );
      const areas = cities.children.find((item) => item.value == areaObj[2]);
      this.FormData.FPrCityArea = provinces.text + cities.text + areas.text;
    },
    // 修改数据详情
    async onDetail(id) {
      const { Data } = await reqPost("GetAddressById", { id });
      // console.log(data);
      this.FormData = Data;
      this.formatAreaObj = [
        this.FormData.FPrvID,
        this.FormData.FCityID,
        this.FormData.FAreaID,
      ];
    },

    // 提交数据
    onSubmit() {
      if (!this.FormData.FAddress) {
        this.$u.toast("请输入地址");
        return;
      }
      if (!this.FormData.FConsignee) {
        this.$u.toast("请输入收货人名字");
        return;
      }
      if (!this.FormData.FPhone || !/^1\d{10}$/.test(this.FormData.FPhone)) {
        this.$u.toast("请输入正确的手机号码");
        return;
      }

      if (this.formatAreaObj.length == 0) {
        this.$u.toast("请选择地区");
        return;
      }

      // let _that = this
      reqPost("SaveAddress", { json: JSON.stringify(this.FormData) }).then(
        (res) => {
          // console.log(res);
          if (res.Status) {
            uni.navigateBack();
          } else {
            uToast("保存失败", "error");
          }
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.add-address {
  height: 100vh;
  position: relative;
  .map {
    height: 300rpx;
    line-height: 300rpx;
    background-color: #f0ad4e;
  }

  .add-form {
    position: absolute;
    left: 30rpx;
    right: 30rpx;
    top: 20px;
    background-color: #fff;
    padding: 20rpx;
    border-radius: 10rpx;
  }

  .active {
    background-color: #f0ad4e !important;
    color: #fff;
  }

  .submit-btn {
    position: absolute;
    left: 30rpx;
    right: 30rpx;
    bottom: 20rpx;
    .btn {
      background-color: #ff2838;
      color: #fff;
    }
  }
}
</style>
